<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="action"
      :accept="accept"
      :limit="limit"
      :disabled="disabled"
      :on-success="handleVideoSuccess"
      :before-upload="beforeUploadVideo"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
    >
      <el-button size="small" :disabled="disabled" type="primary">上传视频</el-button>
      <div slot="tip" class="el-upload__tip">只能上传mp4/ogg/flv/avi/wmv/rmvb文件，且不超过20M</div>
    </el-upload>
    <el-dialog :visible.sync="visible" width="500px" title="视频预览">
      <video :src="src" class="video-avatar" controls="controls">您的浏览器不支持视频播放</video>
    </el-dialog>
  </div>
</template>

<script>
const Address = require("../utils/url");
export default {
  name: "UploadVideo",
  props: {
    limit: {
      //最大允许上传个数
      type: Number,
      default: 1, //默认值
      required: false
    },
    disabled: {
      //是否禁用
      type: Boolean,
      default: false, //默认值
      required: false
    },
    action: {
      //上传的地址
      type: String,
      default: Address.UPLOADVideo, //默认值
      required: false
    },
    list: {
      //回显的视频
      type: Array,
      default: [], //默认值
      required: false
    }
  },
  data() {
    return {
      fileList: [],
      src: "",
      accept: "video/mp4,video/ogg,video/flv,video/avi,video/wmv,video/rmvb", //限制格式
      visible: false
    };
  },
  methods: {
    handlePreview(file) {
      /* http://image.sportfox.cn/13104202005121738295429test.mp4 */
      this.src = file.response ? file.response.data.src : file.url;
      this.visible = true;
    },
    //上传前回调
    beforeUploadVideo(file) {
      const isLt20M = file.size / 1024 / 1024 < 20;
      if (this.accept.split(",").indexOf(file.type) === -1) {
        this.$notify.info({
          title: "警告",
          message: "请上传正确的视频格式",
          type: "warning"
        });
        return false;
      }
      if (!isLt20M) {
        this.$notify.info({
          title: "警告",
          message: "上传视频大小不能超过20MB!",
          type: "warning"
        });
        return false;
      }
    },
    //移除事件
    handleRemove(file, fileList) {
      this.$emit(
        "getVideo",
        fileList.map(v => v.response.data.src)
      );
    },
    //上传成功回调
    handleVideoSuccess(res, file, fileList) {
      if (res.code === 0) {
        this.$emit(
          "getVideo",
          fileList.map(v => v.url || v.response.data)
        );
        //  this.$emit("getVideo1", file.name);
      } else {
        this.$notify.error({
          title: "上传失败",
          message: res.msg,
          type: "warning"
        });
      }
    },
    //回显
    view() {
      const list = [];
      if (this.list.length != 0) {
        this.list.forEach((item, index) => {
          list.push({
            name: new Date().getTime() + index,
            url: item
          });
        });
        this.fileList = list;
      }
    }
  },
  watch: {
    list: {
      handler(val) {
        if (val) {
          this.view();
        } else {
          this.fileList = [];
        }
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.video-avatar {
  width: 460px;
}
</style>
